Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Скрипт позволяет прокручивать любое количество изображений из папке в произвольном месте на сайте. Предоставив вид товара с разных сторон, можно добиться эффекта вращения товара.

Вращение стартует автоматически и отменяется только при клике на изображение. Есть возможность отключения автоматического вращения. Управление просмотром происходит по нажатию на левым-правом крае изображения или посредством вращения колесиком мыши над изображением.

Требования к установке:
• подготовьте набор изображений, имеющих числовые значения имени и одинаковые расширения (например: 1.jpg, 2.jpg, 3.jpg и так далее);

Первый шаг: загрузка файлов на сайт

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js. Кликните на галочку и ура, мы создали папку с нужным именем!:) Теперь абсолютно идентичным действиям создайте папку, но только с названием deg360.

Теперь зайдите в папку js и загрузите в эту папку файл "deg360.js" из архива со скриптом (папка "скрипты").
Теперь зайдите в папку deg360 и создайте новую папку с произвольным названием. Загрузите изображения для прокручивания в эту папку. Для каждого набора изображений создавайте новую папку.

Второй шаг: установка кода

Перейдите в Панель управления » Дизайн » Управление дизайном (шаблоны) и разместите в желаемое место, где хотите видеть отображение прокручивания. В шаблон добавьте код:

<div class="deg360-wrap">
 <h3> Заголовок (опционально) </h3>
 <img src="/deg360/item1/1.jpg" data-cnt="18" id="deg360-1" class="deg360">
 <img alt="" src="/.s/img/icon/ajsml.gif" class="loader">
 <a class="deg360-control deg360-left" data-direction="-1" href="#deg360-1"></a><a class="deg360-control deg360-right" data-direction="1" href="#deg360-1"></a>
</div>
<script src="/js/deg360.js"></script>

Где:

• src="/deg360/item1/1.jpg" – ссылка на изображение, с которого начнется вращение;
• data-cnt="18" – количество изображений в папке;
• id="deg360-1" – уникальный идентификатор, допускается размещение нескольких вращающихся блоков изображений на странице, тогда другим присваиваются id="deg360-2", id="deg360-3" и так далее.

Третий шаг: установка стилей

Перейдите в Панель управления » Дизайн » Управление дизайном (CSS) и добавьте код:

.deg360-wrap {
    display: inline-block;
    border: 1px solid #e5e5e5;
    padding: 4px;
    border-radius: 4px;
    background: #fff;
    position: relative;
    text-align: center;
}
.deg360 {
    cursor: col-resize;
    margin-bottom: 4px
}
.deg360-control {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.deg360-left {	
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.deg360-right {
    left: auto;
    right: 0;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.deg360-wrap .loader {
    margin: auto;
    display: block;
    padding-bottom: 10px;
    position: absolute;
    left: 50%;
    bottom: 0;
}

Где:

• .deg360-wrap – обёртка блока;
• .deg360 – изображения;
• .deg360-control – элементы управления перелистыванием;
• .deg360-left – элемент управления перелистыванием "Влево/Назад";
• .deg360-right – элемент управления перелистыванием "Вправо/Вперед";
• .deg360-wrap .loader – индикатор загрузки изображений.

Четвёртый шаг: настройка и использование

По-умолчанию, скрипт начинает автоматическую прокрутку при посещении страницы. Чтобы отменить это, удалите из файла deg360.js строки с 60 по 69.

Чтобы разместить несколько блоков с прокручиваиемым изображениями, загрузите изображения для нового блока в отдельную папку и используйте код:

<div class="deg360-wrap">
 <h3> Заголовок (опционально) </h3>
 <img src="/deg360/item2/1.jpg" data-cnt="18" id="deg360-2" class="deg360">
 <img alt="" src="/.s/img/icon/ajsml.gif" class="loader">
 <a class="deg360-control deg360-left" data-direction="-1" href="#deg360-2"></a><a class="deg360-control deg360-right" data-direction="1" href="#deg360-2"></a>
</div>

Элементы управления прокручиванием могут быть отключены:

<div class="deg360-wrap">
 <h3> Заголовок (опционально) </h3>
 <img src="/deg360/item3/1.jpg" data-cnt="18" id="deg360-3" class="deg360">
 <img alt="" src="/.s/img/icon/ajsml.gif" class="loader">
</div>